<template>
    <el-menu
        :default-active="activeIndex"
        class="nav"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">主页</el-menu-item>
        <el-menu-item index="2" :style="{float:'right'}"><el-avatar :size="50" :src="avatarUrl"></el-avatar></el-menu-item>
        <el-menu-item index="3" :style="{float:'right'}">写博客</el-menu-item>
    </el-menu>
</template>

<script>
export default {
    name:"Nav",
     data() {
      return {
        activeIndex: '1',
        mainRouters:['/index','/home','/writeBlog'],
        avatarUrl: this.$store.getters.user.avatar,
      };
    },
    methods: {
      handleSelect(key, keyPath) {
            if(key==2){
                this.$router.push(`/home/${this.$store.getters.user.id}`);
            }
            else{
                this.$router.push(`${this.mainRouters[Number(key)-1]}`);
            }
      }
    },
    created(){
        let route=this.$route.fullPath;
        let routeSplit=route.split('/');
        this.activeIndex=String(this.mainRouters.indexOf("/"+routeSplit[routeSplit.length-1])+1);
        if(this.activeIndex=='0'){
          this.activeIndex='1';
        }
        this.$router.push(`${route}`);
    }
}
</script>

<style scoped>
@media only screen and (max-width:414px){
    .el-menu-item{
        font-size: 12px;
    }
}
@media only screen and (max-width:360px){
    .el-menu-item{
        font-size: 12px;
        padding: 0 15px;
    }
}
@media only screen and (max-width:320px){
    .el-menu-item{
        font-size: 12px;
        padding: 0 12px;
    }
}
</style>

